<div class="row-content am-cf" xmlns:th="http://www.w3.org/1999/xhtml">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title  am-cf">列表</div>
                </div>
                <div class="widget-body  am-fr">
                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                        <div class="am-form-group tpl-table-list-select" style="color: #03a9f3">
                            <select>
                                <option value="TYPE_VALUE">数值型（比如传感器值）</option>
                                <option value="TYPE_SWITCHER">开关型（只有两个状态，默认关闭）</option>
                                <option value="TYPE_MEDIA">媒体型（比如，监控图像，视频等等）</option>

                            </select>
                        </div>
                    </div>

                    <div class="am-u-sm-12">
                        <table width="100%" class="am-table am-table-compact am-table-bordered tpl-table-black "
                               id="example-r">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>状态</th>
                                <th>备注</th>
                                <th>类型</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody th:each="device:${devicePage.content}">

                            <tr class="gradeX" th:switch="${device.type}">

                                <td th:text="${device.id}"></td>
                                <td th:text="${device.name}"></td>
                                <td th:if="${device.isOnline==true}"><span class="am-badge am-badge-success">在线</span>
                                </td>
                                <td th:if="${device.isOnline==false}"><span class="am-badge am-badge-danger">离线</span>
                                </td>
                                <td th:text="${device.deviceDescribe}"></td>

                                <td th:text="${device.type}"></td>
                                <td>
                                    <div class="tpl-table-black-operation">

                                        <a type="button" style="color: #FFFFFF"
                                           th:href="|/admin/deviceDetail?deviceId=${device.id}|"
                                           class="am-btn am-btn-secondary">数据</a>
                                        <a type="button" style="color: #FFFFFF" href="/admin/addDevice"
                                           class="am-btn am-btn-success">编辑</a>
                                        <a type="button" style="color: #FFFFFF" href="/admin/deleteDevice"
                                           class="am-btn am-btn-warning">删除</a>

                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div>
                            <ul class="am-pagination">
                                <li th:if="${devicePage.number}==${devicePage.TotalPages}">上一页</li>
                                <li th:if="${devicePage.number} le ${devicePage.TotalPages}">下一页</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

